<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
	<!--引入Jquery主文件-->
	<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
	<!--引入JqueryEasyUI主文件-->
	<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
	<!--让easyUI支持中文-->
	<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
		var url;
		/* 添加教室信息的函数 */
    	function add(){
		  	 $("#dlgadd").dialog({closed:false,title:"添加教师信息"});
		  	 for(var i=18;i<=65;i++){
		  		$("#age").append("<option value="+ i +">"+i+"</option>"); 
		  	 }
		  	 for(var i=1;i<=40;i++){
			  		$("#teach_time").append("<option value="+ i +">"+i+"</option>"); 
			 } 
			 url="${pageContext.request.contextPath}/pages/teacher/add.do";
	  	}
    	
		//编辑教师信息
  	  	function edit(){
	  	 	 var selected = $("#datagrid").datagrid("getSelections");
	  	 	 	  for(var i=18;i<=65;i++){
			  	  	$("#t_age").append("<option value="+ i +">"+i+"</option>"); 
			  	  }
			  	  for(var i=1;i<=40;i++){
				  	$("#t_teach_time").append("<option value="+ i +">"+i+"</option>"); 
				  }
	  		 //若未选择要修改的记录，给出提示
	 	  	 if(selected.length == 0){
	 	  		$.messager.alert("消息提示", "请选择要编辑记录！", "error");
	 	  	 }else if(selected.length > 1){
	 	  		$.messager.alert("消息提示", "每次只能修改一条记录！", "error");
	 	  	 }else{
	 	  		 var row=$("#datagrid").datagrid("getSelected");
	 	 		 if(row){
	 		 		  $("#dlgedit").dialog({closed:false,title:"编辑教师信息"});
	 		 		 
	 		 		  $("#fmedit").form("load",row);
	 		 		 url="${pageContext.request.contextPath}/pages/teacher/update.do";
	 	 		 } 
	 	  	 }
 	   }
		
	  	function saveAdd(){
		  	$('#fmadd').form('submit', {  		
		  		url:url,   
			    onSubmit: function(){  
			    	if ($("#name").val()==null||$("#name").val()==""){
			    		alert("姓名不能为空！");
			    		 return false;
			    	}
			    	else {
			    		return true;
			    	}
			    }, 
			    success:function(data){    
			       var data=eval("("+data+")");
				   if(data.res){	
				   	  $('#dlgadd').dialog({closed:true});
					  $("#datagrid").datagrid("reload");
				   }else{
					   alert("保存失败！");
				   }  
			    }    
			}); 
		  }
	  	
	  	function saveEdit(){
		  	$('#fmedit').form('submit', {  		
		  		url:url,   
			    onSubmit: function(){  
			    	if ($("#t_name").val()==null||$("#t_name").val()==""){
			    		alert("姓名不能为空！");
			    		 return false;
			    	}
			    	else {
			    		return true;
			    	}
			    },    
			    success:function(data){    
			       var data=eval("("+data+")");
				   if(data.res){	
				   	  $('#dlgedit').dialog({closed:true});
					  $("#datagrid").datagrid("reload");
				   }else{
					   alert("保存失败！");
				   }  
			    }    
			}); 
		  } 
		
	  	
	  	
	  //删除用户信息
		function del() {
			var rows = $("#datagrid").datagrid("getChecked");
			var ids = [];
			if (rows.length > 0) {
				$.messager.confirm("请确认", "您要删除当前所选记录？", function(r) {
					if(r){
						for (var i = 0; i < rows.length; i++) {
							ids.push(rows[i].id);
						}
						
						$.ajax({
							url : "${pageContext.request.contextPath}/pages/teacher/delete.do",
							data : {
								ids : ids.join(",")
							},
							
							success : function(d) {
								if (d) {
									$("#datagrid").datagrid("load");
									$("#datagrid").datagrid("unselectAll");
								} else {
									$.messager.alert("消息提示", "删除信息失败！", "error");
								}
							}
						});
					}
				});

			} else {
				$.messager.alert("消息提示", "请勾选需要删除的记录！", "error");
			}

		}
	  
	  /*查询根据输入的课程名称来进行查询*/
	  function query(){
		  //获取输入的查询条件
	  	var para = $("#teacher_name").val();
	  	var page = $('#datagrid').datagrid('getPager').data("pagination").options.pageNumber; 
	  	var rows = $('#datagrid').datagrid('getPager').data("pagination").options.pageSize;
			//利用ajax,来获取后台查询数据
			$.post("${pageContext.request.contextPath}/pages/teacher/query.do","page="+page+"&rows="+rows+"&column=teacher_name&keyWord="+para,function(data){
			//msg可以是AJAX返回的数据也可以自定义的JSON格式的字符串
			$('#datagrid').datagrid('loadData', JSON.parse(data));
		},"text");
	  }
	  
	  //取消选中的记录
	  function unselect() {
		$("#datagrid").datagrid("clearSelections");
		$("#datagrid").datagrid("unselectAll");
	  }
	  
	 
	</script>


  </head>
 <body>
    
	<div data-options="region:'north',border:false,title:'查询条件'" style="height: 5%;overflow: hidden;" align="left">
		<form  action="">
			<table class="tableForm datagrid-toolbar"  style="width: 100%;height: 50%">
				<tr>
					<td>根据教师姓名查询
					<input name="teacher_name" id="teacher_name" type="text" style="width: 200px;"/>
					<a href="javascript:void(0)" onclick="query()"  class="easyui-linkbutton">查询</a>
					</td>
				
				</tr>
			</table>
		</form>
	</div> 
	
 <div style="width:100%;height:95%;">
		<table class="easyui-datagrid" id="datagrid"
	            data-options="singleSelect:false,
					            fit:true, 
					            fitColumns:true,
					            pagination:true,
					            collapsible:true,
					            pagePosition : 'bottom',
								pageList : [ 5,10,15,20 ],
								pageSize : 5,
								checkOnSelect : true,
								selectOnCheck : true,
								toolbar:'#tb',
					            url:'${pageContext.request.contextPath}/pages/teacher/query.do',method:'post'">
	        <thead>
	            <tr>
	                <th data-options="field:'id',width:20,align:'center',checkbox:true">id</th>
	                <th data-options="field:'name',width:20,align:'center'">姓名</th>
	                <th data-options="field:'age',width:20,align:'center'">年龄</th>
	                <th data-options="field:'sex',width:20,align:'center'">性别</th>
	                <th data-options="field:'teach_time',width:20,align:'center'">教龄</th>
	                <th data-options="field:'email',width:20,align:'center'">邮箱</th>
	                <th data-options="field:'mobile',width:20,align:'center'">手机</th>
	                <th data-options="field:'qq',width:20,align:'center'">QQ号</th>
	                
	            </tr>
	        </thead>
	    </table>  
	  </div> 
    <!--  对记录进行增删改查的操作的按钮 -->
	    <div id="tb">
		   	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="add()" plain=true> 新建</a>
			 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="edit()"  plain=true> 编辑</a>
			 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="del()"  plain=true> 删除</a>
			 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'" onclick="unselect()" plain=true> 取消选中</a>
	   	</div>
	   	
	    <!-- 增加记录的表单 -->
	   	<div id="dlgadd" class="easyui-dialog" style="width:300px;height:350px;background:gray" data-options="buttons:'#btnsadd',closed:true">
	   	   <form id="fmadd" method="post">
	   	   	 <br/>
				    姓名:<input class="easyui-validatebox" data-options="required:true" type="text" name="name" id = "name"/><br/><br/>
				   年龄:<select name="age" id="age" style="width:173px">
					 </select><br/><br/>
				    性别:<select name="sex" style="width:173px">
						<option value="男">男</option>
						<option value="女">女</option>
					 </select><br/><br/>
				   教龄:<select name="teach_time" id="teach_time" style="width:173px">
					 </select><br/><br/>
				    邮箱:<input type="text" name="email"/><br/><br/>
				   手机:<input type="text" name="mobile"/><br/><br/>
				 QQ号:<input type="text" name="qq"/><br/>

	   	   </form>
   		</div>
   			   <!-- 	对记录进行修改的表单 -->
	   	<div id="dlgedit" class="easyui-dialog" style="width:300px;height:350px;background:gray" data-options="buttons:'#btnsedit',closed:true">
	   	   <form id="fmedit" method="post">
	   	   	 <br/>
		   	   	  <input type="text" name="id" hidden=true/><br/>
				    姓名:<input type="text" name="name" id="t_name"/><br/><br/>
				    年龄:<select name="age" id="t_age" style="width:173px">
	
				 </select><br/><br/>
				    性别:<input type="text" name="sex"/><br/><br/>				    
				   教龄:<select name="teach_time" id="t_teach_time" style="width:173px">
	
				 </select><br/><br/>
				   邮箱:<input type="text" name="email"/><br/><br/>
				   手机:<input type="text" name="mobile"/><br/><br/>
				 QQ号:<input type="text" name="qq"/><br/>
	   	   </form>
   		</div>
   		<!-- 定义添加表单上的按钮 -->
   		<div id="btnsadd">
		   	 <a href="#" class="easyui-linkbutton" onclick="saveAdd()">保存</a>
			 <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlgadd').dialog({closed:true})">取消</a>
	   </div>
	   
	   <!-- 定义修改表单上的按钮 -->
   		<div id="btnsedit">
		   	 <a href="#" class="easyui-linkbutton" onclick="saveEdit()">保存</a>
			 <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlgedit').dialog({closed:true})">取消</a>
	    </div>	   	
	<div id="dd" ></div>
</body>  
</html>